<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="420"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Function to draw an arrow
        function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        }

        // Set common styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // 1. Draw the two parallel walls
        const wallX1 = 100;
        const wallX2 = 400;
        const wallYTop = 50;
        const wallYBottom = 350;
        const capWidth = 5;

        ctx.beginPath();
        // Left wall
        ctx.moveTo(wallX1, wallYTop);
        ctx.lineTo(wallX1, wallYBottom);
        ctx.moveTo(wallX1 - capWidth, wallYTop);
        ctx.lineTo(wallX1 + capWidth, wallYTop);
        ctx.moveTo(wallX1 - capWidth, wallYBottom);
        ctx.lineTo(wallX1 + capWidth, wallYBottom);
        
        // Right wall
        ctx.moveTo(wallX2, wallYTop);
        ctx.lineTo(wallX2, wallYBottom);
        ctx.moveTo(wallX2 - capWidth, wallYTop);
        ctx.lineTo(wallX2 + capWidth, wallYTop);
        ctx.moveTo(wallX2 - capWidth, wallYBottom);
        ctx.lineTo(wallX2 + capWidth, wallYBottom);
        ctx.stroke();

        // 2. Draw the distance 'l'
        const l_y = 320;
        ctx.beginPath();
        // The line itself
        ctx.moveTo(wallX1, l_y);
        ctx.lineTo(wallX2, l_y);
        // Left arrowhead
        ctx.moveTo(wallX1 + 10, l_y - 5);
        ctx.lineTo(wallX1, l_y);
        ctx.lineTo(wallX1 + 10, l_y + 5);
        // Right arrowhead
        ctx.moveTo(wallX2 - 10, l_y - 5);
        ctx.lineTo(wallX2, l_y);
        ctx.lineTo(wallX2 - 10, l_y + 5);
        ctx.stroke();

        // Label 'l'
        ctx.font = "italic 22px 'Times New Roman'";
        ctx.fillText('l', (wallX1 + wallX2) / 2 - 5, l_y - 10);

        // 3. Draw the ball and its labels
        const ballRadius = 9;
        const ballX = 280;
        const ballY = 180;
        
        ctx.beginPath();
        ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
        ctx.stroke();
        
        // Label 'm'
        ctx.font = "italic 22px 'Times New Roman'";
        ctx.fillText('m', ballX + ballRadius + 8, ballY + 8);

        // 4. Draw velocity vector v₀
        ctx.beginPath();
        drawArrow(ctx, ballX - ballRadius - 5, ballY, ballX - 80, ballY);
        ctx.stroke();

        // Label 'v₀'
        ctx.font = "italic 22px 'Times New Roman'";
        ctx.fillText('v', ballX - 55, ballY - 10);
        ctx.font = "16px 'Times New Roman'";
        ctx.fillText('0', ballX - 42, ballY - 5);

        // 5. Draw velocity vector V
        const v_y = 150;
        ctx.beginPath();
        drawArrow(ctx, wallX1, v_y, wallX1 + 80, v_y);
        ctx.stroke();

        // Label 'V'
        ctx.font = "italic 22px 'Times New Roman'";
        ctx.fillText('V', wallX1 + 35, v_y - 10);

        // 6. Draw the figure caption
        ctx.font = "20px 'SimHei', 'Microsoft YaHei', sans-serif";
        ctx.textAlign = 'center';
        ctx.fillText('力图 3.14.1', canvas.width / 2, 400);

    </script>
</body>
</html>